<template>
  <div class="lkr-wrapper">
    <h1 v-if="userAsd.userLevel === '0' || loading" style="position: absolute; text-align: center; padding: 15px;">欢迎使用LKR</h1>
    <div v-else>
        <div class="header-bar">
        <div class="tab-bar">
          <div :class="{'active': currentTab === 1}" @click="toTab(1, 'lkr-okrs')">OKRs</div>
          <div :class="{'active': currentTab === 3}" @click="toTab(3, 'lkr-data-panel')" v-if="!viewerLook">数据看板</div>
        </div>
        <div class="menu-bar">
          <span class="menu-item"><i class="el-icon-question" @click="toTab(2, 'help')"></i></span>
          <span class="menu-item"><i class="el-icon-setting" @click="setting" v-if="!viewerLook"></i></span>
          <span>
            <img v-if="user.avatar" :src="user.avatar">
            <span style="font-size: 14px;" v-else>{{user.realName}}</span>
          </span>
        </div>
      </div>
      <el-dialog :visible.sync="organizationDialogVisible" width="800px" :append-to-body="true" :show-close="false">
        <span slot="title" style="display: flex; justify-content: space-between; line-height: 24px; font-size: 18px; color: #72767b;">
          <span>公司部门</span>
          <span style="cursor: pointer; font-size: 20px;">
            <i class="el-icon-plus" style="padding-right: 20px" :style="!curOrganization.id ? 'border-right: 1px solid #CCC; margin-right: 30px; padding-right: 30px' : ''" @click="editDepartmentDialog('add')" v-if="canAddDepartment"></i>
            <i class="el-icon-edit" style="border-right: 1px solid #CCC; margin-right: 30px; padding-right: 30px" @click="editDepartmentDialog('edit')" v-if="canAddDepartment && curOrganization.id"></i>
            <i class="el-icon-close" @click="organizationDialogVisible=false"></i>
          </span>
        </span>
        <div style="padding: 20px;">
          <organization ref="department" @curOrganization="chooseOrganization" style="height: 500px; overflow: auto;" class="organization-wrapper" />
        </div>
      </el-dialog>
      <addOrEditDepartment ref="addOrEditDepartment" @refreshOrganization="refreshOrganization" :userAsd="userAsd" :dialogVisible.sync="addOrEditDepartmentDialogVisible" />
      <router-view ref="component" @changeTab='toTab' v-if="refreshDepartment"></router-view>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import organization from './component/organization'
import addOrEditDepartment from './add-or-edit-department'

export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      refreshDepartment: true,
      dingUserList: { 
        manage: { id: [], img: [], name: []},
        cc: { id: [], img: [], name: []},
      },
      currentTab: 1,
      user: {},
      organizationDialogVisible: false,
      addOrEditDepartmentDialogVisible: false,
      curOrganization: {},
      userAsd: {},
      loading: true
    };
  },
  components: {
    organization, addOrEditDepartment
  },
  watch: {
    $route (to, from) {
      if(to.name === 'lkr' && from.name === 'lkr-okrs') {
        let id = this.$route.query.goalId;
        this.currentTab = 1;
        this.$router.replace({ name: 'lkr-okrs'})
        if(id) this.$refs.component.showTargetDetail(id)
      }else if(to.name === 'lkr') {
        this.currentTab = 1;
        this.$router.replace({ name: 'lkr-okrs' , params: {goalId: this.$route.query.goalId}})
      }
    }
  },
  mounted () {
    if(!this.isPC()) this.loading = true;
    this.getDingConfig().then(config =>{
      this.dingConfig = config;
      this.dingLogin(config.corpId, () => {
        this.getAsd();
      });
      this.run_dd_config();
    })
  },
  mixins: [dingMixin],
  computed: {
    viewerLook() {
      return this.userAsd.userLevel === '3'
    },
    canAddDepartment() {
      return this.userAsd.userLevel === '1'
    },
  },
  methods: {
    async getAsd() {
      this.userAsd = await this.$httpN.postB('lkr/organization/asd');
      this.loading = false;
      if(this.userAsd.userLevel==='0') {
        this.currentTab = 1;
        this.$router.replace({ name: 'lkr-okrs' })
        this.user = this.userInfo
        return;
      }
      if(!this.isPC()) {
        this.$router.replace({name: 'mlkr-home'})
      } else {
        this.currentTab = 1;
        this.$router.replace({ name: 'lkr-okrs' })
        this.user = this.userInfo
      }
    },
    reload() {
      this.refreshDepartment = false;
      this.curOrganization = {};
      this.$nextTick(() => {
        this.refreshDepartment = true
      })
    },
    toTab(tab, tabname, params) {
      this.currentTab = tab;
      if(tab === 2) return this.$router.push({ name:  'help', params: {articleId: '1293083771210407937'}})
      if(tabname) this.$router.push({ name: tabname })
    },
    setting() {
      if(this.$refs.department) {
        this.$refs.department.getOrganization();
        this.curOrganization = {};
      }
      this.organizationDialogVisible = true;
    },
    chooseOrganization(data) {
      this.curOrganization = data;
    },
    editDepartmentDialog(type) {
      this.addOrEditDepartmentDialogVisible = true
      this.$nextTick(() => {
        this.$refs.addOrEditDepartment.init(type, this.curOrganization);
      })
    },
    refreshOrganization() {
      this.$refs.department.getOrganization()
      if(this.currentTab === 1) this.reload()
    }
  }
}
</script>

<style lang='scss' scoped>
.organization-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color:red;
}
.organization-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #DEDEDE;
  background: rgba(0,0,0,0.2);
  scrollbar-arrow-color:red;
}
.organization-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #F5F5F5;
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}
.lkr-wrapper {
  background: #F4F4F4;
  overflow: hidden;
  .header-bar {
    height: 60px;
    line-height: 60px;
    z-index: 2;
    background: #FFF;
    position: relative;
    display: flex;
    justify-content:space-between;
    box-shadow: 0 3px 4px #cccccc;
    padding: 0 20px;
    font-size: 16px;
    .tab-bar {
      text-align: center;
      display: flex;
      > div {
        cursor: pointer;
        padding: 0 35px;
      }
      .active {
        color: #3296FA;
      }
    }
    .menu-bar {
      font-size: 24px;
      display: flex;
      .menu-item {
        margin-right: 20px;
        cursor: pointer;
      }
      img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
    }
  }
}
.el-dialog__wrapper {
  /deep/.el-dialog__header {
    padding: 15px;
    box-shadow: 0 3px 4px #cccccc;
  }
  /deep/.el-dialog__body {
    padding: 0;
  }
}
</style>